<template>
    <div>
        <div @click="clickBarChart" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <CalendarHeatMap/>
            </n-icon>
            <Handle id="CalendarHeatMap-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="CalendarHeatMap-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>色块图</span>
        <n-drawer v-model:show="active" :width="'80vw'">
            <n-drawer-content>
                <template #header>
                    色块图
                </template>
                <!--获取上级节点数据 进行去除空值-->
                <n-space>
                    <n-button @click="getSuperiorData">
                        <template #icon>
                            <n-icon>
                                <Login/>
                            </n-icon>
                        </template>
                        获取上级节点数据
                    </n-button>
                    <n-button
                        @click="drawing"
                        :disabled="!selects.x||!selects.y||!selects.weight"
                    >
                        <template #icon>
                            <n-icon>
                                <CalendarHeatMap/>
                            </n-icon>
                        </template>
                        绘图
                    </n-button>
                    <n-select
                        class="n-select-one"
                        placeholder="横坐标"
                        v-model:value="selects.x"
                        :options="props.data.data.title"
                        label-field="title"
                        value-field="key"
                        :disabled="!props.data.data.title"
                    />
                    <n-select
                        class="n-select-one"
                        placeholder="纵坐标"
                        v-model:value="selects.y"
                        :options="props.data.data.title"
                        label-field="title"
                        value-field="key"
                        :disabled="!props.data.data.title"
                    />
                    <n-select
                        class="n-select-one"
                        placeholder="权重"
                        v-model:value="selects.weight"
                        :options="props.data.data.title"
                        label-field="title"
                        value-field="key"
                        :disabled="!props.data.data.title"
                    />

                </n-space>
                <!--展示数据-->
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div ref="chartDom" style="width: 100%;height:80%;"></div>
                <template #footer>
                    <n-button @click="active=false">完成</n-button>
                </template>
            </n-drawer-content>
        </n-drawer>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {CalendarHeatMap, Login} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import * as echarts from 'echarts';


const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
const clickBarChart = () => {
    active.value = true
    setTimeout(() => {
        if (props.data.selects) {
            Object.keys(props.data.selects).forEach(key => {
                if (selects.value.hasOwnProperty(key)) {
                    selects.value[key] = props.data.selects[key];
                }
            });
        }
        if (selects.value.x !== null && selects.value.y.length !== null&&selects.value.weight !== null) {
            drawing();
        }
    }, 1)
}
// 抽屉
const active = ref(false)
const selects = ref({
    x: null,
    y: null,
    weight: null,
})

const option = ref(null)
let chartDom = ref(null)

const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    return
                }
            }
        }
    }
}
const drawing = () => {
    // prettier-ignore
    let xArray = [];
// prettier-ignore
    let yArray = [];
    let maxWeight = 10
    let minWeight = -10
// prettier-ignore
    let data = []
    for (let i of props.data.data.data) { // 循环全部数据
        xArray.push(i[selects.value.x])
        yArray.push(i[selects.value.y])
    }
    xArray = Array.from(new Set(xArray)) // 去重
    yArray = Array.from(new Set(yArray)) // 去重
    for (let i of props.data.data.data) {
        data.push([
            xArray.indexOf(i[selects.value.x]),
            yArray.indexOf(i[selects.value.y]),
            i[selects.value.weight]
        ])
        let weight = i[selects.value.weight]
        maxWeight = maxWeight < weight ? weight : maxWeight
        minWeight = minWeight > weight ? weight : minWeight
    }
    data = data.map(function (item) {
        return [item[1], item[0], item[2] || '-'];
    });
    // 绘图
    option.value = {
        tooltip: {
            position: 'top'
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            height: '50%',
            top: '10%'
        },
        xAxis: {
            type: 'category',
            data: xArray,
            splitArea: {
                show: true
            }
        },
        yAxis: {
            type: 'category',
            data: yArray,
            splitArea: {
                show: true
            }
        },
        visualMap: {
            min: minWeight,
            max: maxWeight,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '15%'
        },
        series: [
            {
                name: 'Punch Card',
                type: 'heatmap',
                data: data,
                label: {
                    show: true
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    let myChart = echarts.init(chartDom.value);
    props.data.selects = selects.value
    console.log(option.value)
    props.data.option = option.value
    option.value && myChart.setOption(option.value);
}
</script>

<style scoped lang="less">
.n-select-one {
    width: 8vw;
}

.n-select-two {
    width: 45vw;
}

.n-space {
    .n-space-span {
        position: relative;
        top: 18%;
    }
}
</style>